html,body {
    height:100%;
}
body {
    background:#bfbfff url(../img/body_bg.gif) repeat-x 0 bottom;
}
p,input {
    margin:0;
    padding:0;
}
.wrap {
    width:320px;
    margin:0 auto 0;
    position:relative;
    top:120px;
}
#scroe {
    width:262px;
    height:185px;
    background:url(../img/scroe.png) no-repeat;
    position:absolute;
    left:-90px;
    top:-80px;
}
#scroe .scroeNum {
    height:50px;
    text-align: center;
    font-size:30px;
    line-height:50px;
    font-weight:bold;
    color:#fff;
    font-family: Arial;
}
.summary {
    width:300px;
    font-size:14px;
    line-height: 18px;
    color:#fff;
    position:absolute;
    bottom:200px;
    left:50%;
    margin-left: 180px;
}

#con {
    width: 320px;
    height: 436px;
    background: url(../img/bg.png) no-repeat;
    margin-top:-30px;
}
#con div {
    float:left;
    width:80px;
    height:109px;
    position: relative     
}
#con img {
    vertical-align:top;
    border:none;
    width:80px;
    height:109px;
    position: absolute;
    top:0;
    left:0;
}

#mask {
    width:100%;
    height:100%;
    background:#000;
    border-radius:10px;
    opacity: 0.1;
    position:absolute;
    left:0;
    top:0;
    display:none;
}
#jump {
    width:260px;
    height:180px;
    background:#eccbf0;
    box-shadow:inset 0 0 8px #6fd9f0;
    position:absolute;
    top:150px;
    left:30px;
    border-radius:10px;
    display:none;
}
#jump input {
    width:100px;
    height:36px;
    margin:30px 80px;
}
#jump p {
    margin-top:30px;
    height:60px;
    line-height:60px;
    text-align:center;
    color:#fff;
    font-weight: bold;
}